```html
<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Xget - 开源资源获取加速引擎</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 1rem;
        }
        .code-block {
            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
            background-color: #1e293b;
            color: #e2e8f0;
            border-radius: 0.5rem;
            padding: 1rem;
            position: relative;
        }
        .code-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
            border-radius: 0.5rem 0 0 0.5rem;
        }
        .highlight-text {
            background: linear-gradient(to right, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 600;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4">
        <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <div class="flex items-center mb-6">
                    <span class="bg-white/20 px-3 py-1 rounded-full text-sm font-medium">开源项目</span>
                    <a href="https://github.com/xixu-me/Xget" class="ml-4 flex items-center text-white hover:text-blue-100 transition">
                        <i class="fab fa-github mr-2"></i> GitHub
                    </a>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
                    <span class="highlight-text">Xget</span> - 高性能资源获取加速引擎
                </h1>
                <p class="text-xl text-blue-100 mb-8 max-w-lg">
                    通过 Cloudflare 全球边缘网络加速 GitHub、Hugging Face、npm 等平台资源下载，为开发者提供统一、高效的获取体验。
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="#getting-started" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition duration-300 shadow-md">
                        <i class="fas fa-rocket mr-2"></i> 快速开始
                    </a>
                    <a href="#features" class="bg-white/10 px-6 py-3 rounded-lg font-medium hover:bg-white/20 transition duration-300 border border-white/20">
                        <i class="fas fa-star mr-2"></i> 核心功能
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="bg-white/10 p-6 rounded-2xl backdrop-blur-sm border border-white/20 max-w-md">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1755406706234-6bbcc7a7-71ea-4a77-8a89-5d2b670c06c5.png" alt="Xget Architecture" class="rounded-lg shadow-xl">
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Statement -->
    <section class="py-16 px-4" id="problems">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">它能解决什么问题</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    开发者在获取开源资源时常遇到的痛点与挑战
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="feature-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-network-wired text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">网络波动与中断</h3>
                    <p class="text-slate-600">
                        从 GitHub 克隆大型仓库时因网络波动而失败，导致开发进度受阻和效率降低。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="feature-icon bg-purple-100 text-purple-600">
                        <i class="fas fa-clock text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">下载耗时过长</h3>
                    <p class="text-slate-600">
                        从 Hugging Face 下载数十 GB 的 AI 模型耗时数小时，严重拖慢数据科学工作流程。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="feature-icon bg-amber-100 text-amber-600">
                        <i class="fas fa-tachometer-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">构建效率低下</h3>
                    <p class="text-slate-600">
                        npm 或 PyPI 包安装缓慢，影响构建效率，导致 CI/CD 流水线时间延长。
                    </p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-md card-hover">
                    <div class="feature-icon bg-emerald-100 text-emerald-600">
                        <i class="fas fa-server text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">部署不稳定</h3>
                    <p class="text-slate-600">
                        Docker 镜像拉取速度不稳定，阻碍部署流程，增加运维复杂度。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Features -->
    <section class="py-16 bg-slate-50 px-4" id="features">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    Xget 提供以下 5 个核心功能，显著提升资源获取效率
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-blue-50 text-blue-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-1">多平台支持</h3>
                            <p class="text-slate-600 text-sm">
                                支持 GitHub、GitLab、Hugging Face、npm、PyPI、Docker 等 30 多个平台
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-purple-50 text-purple-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-1">HTTP/3 协议</h3>
                            <p class="text-slate-600 text-sm">
                                利用最新 HTTP/3 协议，降低 40% 连接延迟，提升 30% 传输速度
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-amber-50 text-amber-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-database"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-1">智能缓存</h3>
                            <p class="text-slate-600 text-sm">
                                默认 30 分钟缓存，重复下载几乎瞬时完成，减轻源站压力
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-emerald-50 text-emerald-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-1">并行分片下载</h3>
                            <p class="text-slate-600 text-sm">
                                支持 HTTP Range 请求，结合 aria2 等工具实现多线程加速
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-red-50 text-red-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-lock"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-1">企业级安全</h3>
                            <p class="text-slate-600 text-sm">
                                通过 HSTS、CSP 和请求验证，防范中间人攻击、XSS 和路径遍历风险
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-indigo-50 text-indigo-600 p-3 rounded-lg mr-4">
                            <i class="fas fa-globe"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-1">全球边缘网络</h3>
                            <p class="text-slate-600 text-sm">
                                利用 Cloudflare 330+ 边缘节点，确保全球范围内高速访问
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4" id="use-cases">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    Xget 在多种开发场景中表现出色
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
                    <div class="bg-blue-600 p-6 text-white">
                        <i class="fas fa-code text-3xl mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">快速克隆代码仓库</h3>
                        <p class="text-blue-100">开发者需从 GitHub 克隆大型项目</p>
                    </div>
                    <div class="p-6">
                        <div class="code-block text-sm mb-4">
                            git config --global url."https://xget.xi-xu.me/gh/".insteadOf "https://github.com/"
                        </div>
                        <p class="text-slate-600 text-sm">
                            克隆速度可提升至 5 倍，避免网络中断
                        </p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
                    <div class="bg-purple-600 p-6 text-white">
                        <i class="fas fa-robot text-3xl mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">AI 模型下载</h3>
                        <p class="text-purple-100">数据科学家从 Hugging Face 下载大型模型</p>
                    </div>
                    <div class="p-6">
                        <div class="code-block text-sm mb-4">
                            wget https://xget.xi-xu.me/hf/openai/whisper-large-v3/resolve/main/pytorch_model.bin
                        </div>
                        <p class="text-slate-600 text-sm">
                            可显著缩短大型模型下载时间
                        </p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover">
                    <div class="bg-emerald-600 p-6 text-white">
                        <i class="fas fa-cogs text-3xl mb-4"></i>
                        <h3 class="text-xl font-semibold mb-2">CI/CD 流水线优化</h3>
                        <p class="text-emerald-100">在 GitHub Actions 中加速依赖安装</p>
                    </div>
                    <div class="p-6">
                        <div class="code-block text-sm mb-4">
                            npm config set registry https://xget.xi-xu.me/npm/
                        </div>
                        <p class="text-slate-600 text-sm">
                            缩短构建时间，提升自动化效率
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages -->
    <section class="py-16 bg-slate-50 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    Xget 相比其他加速工具的独特优势
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-sm mb-8">
                        <h3 class="text-xl font-semibold mb-6 flex items-center">
                            <span class="w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-4">1</span>
                            广泛平台覆盖
                        </h3>
                        <p class="text-slate-600">
                            支持 30+ 平台，包括代码托管、包管理、AI 模型和容器镜像，远超单一平台加速器（如 npm 镜像站）。
                        </p>
                    </div>
                    
                    <div class="bg-white p-8 rounded-xl shadow-sm mb-8">
                        <h3 class="text-xl font-semibold mb-6 flex items-center">
                            <span class="w-8 h-8 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mr-4">2</span>
                            现代化技术栈
                        </h3>
                        <p class="text-slate-600">
                            基于 Cloudflare Workers，结合 HTTP/3、brotli 压缩和全球 330+ 边缘节点，响应时间低于 50ms。
                        </p>
                    </div>
                    
                    <div class="bg-white p-8 rounded-xl shadow-sm">
                        <h3 class="text-xl font-semibold mb-6 flex items-center">
                            <span class="w-8 h-8 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mr-4">3</span>
                            协议深度兼容
                        </h3>
                        <p class="text-slate-600">
                            支持 Git（clone/pull/push）、Docker（OCI 标准）等协议，处理复杂请求而非简单转发。
                        </p>
                    </div>
                </div>
                
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-sm mb-8">
                        <h3 class="text-xl font-semibold mb-6 flex items-center">
                            <span class="w-8 h-8 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mr-4">4</span>
                            浏览器扩展支持
                        </h3>
                        <p class="text-slate-600">
                            Xget-Now 扩展（支持 Chrome 和 Firefox）自动重定向下载链接，简化操作流程。
                        </p>
                    </div>
                    
                    <div class="bg-white p-8 rounded-xl shadow-sm mb-8">
                        <h3 class="text-xl font-semibold mb-6 flex items-center">
                            <span class="w-8 h-8 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-4">5</span>
                            开源免费
                        </h3>
                        <p class="text-slate-600">
                            完全开源，社区可贡献代码，无任何订阅费用，所有功能均免费开放。
                        </p>
                    </div>
                    
                    <div class="bg-white p-8 rounded-xl shadow-sm">
                        <div class="border-l-4 border-yellow-400 pl-4">
                            <h4 class="font-semibold text-yellow-700 mb-2">局限性说明</h4>
                            <p class="text-slate-600 text-sm">
                                Xget 依赖 Cloudflare 网络，某些地区可能因网络限制无法访问公共实例。部分动态内容（如 Git LFS 文件）可能需额外配置。此外，自部署实例需要 Cloudflare Workers 账户，可能增加技术门槛。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-16 px-4" id="getting-started">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    快速开始使用 Xget 加速你的资源获取
                </p>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white">
                    <h3 class="text-xl font-semibold mb-2">使用公共实例</h3>
                    <p class="text-blue-100">无需部署，直接使用公共实例加速下载</p>
                </div>
                
                <div class="p-6">
                    <h4 class="font-semibold text-lg mb-3 flex items-center">
                        <span class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3 text-sm">1</span>
                        直接下载文件
                    </h4>
                    <div class="code-block mb-6">
                        wget https://xget.xi-xu.me/gh/microsoft/vscode/archive/refs/heads/main.zip
                    </div>
                    
                    <h4 class="font-semibold text-lg mb-3 flex items-center">
                        <span class="w-6 h-6 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3 text-sm">2</span>
                        克隆 GitHub 仓库
                    </h4>
                    <div class="code-block mb-6">
                        git clone https://xget.xi-xu.me/gh/microsoft/vscode.git
                    </div>
                    
                    <div class="border-t border-slate-200 my-6"></div>
                    
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fas fa-cog text-blue-600 mr-3"></i>
                        配置全局加速
                    </h3>
                    
                    <h4 class="font-semibold text-lg mb-3 flex items-center">
                        <span class="w-6 h-6 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mr-3 text-sm">1</span>
                        Git 全局配置
                    </h4>
                    <div class="code-block mb-6">
                        git config --global url."https://xget.xi-xu.me/gh/".insteadOf "https://github.com/"
                    </div>
                    
                    <h4 class="font-semibold text-lg mb-3 flex items-center">
                        <span class="w-6 h-6 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mr-3 text-sm">2</span>
                        npm 注册表设置
                    </h4>
                    <div class="code-block mb-6">
                        npm config set registry https://xget.xi-xu.me/npm/
                    </div>
                    
                    <h4 class="font-semibold text-lg mb-3 flex items-center">
                        <span class="w-6 h-6 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mr-3 text-sm">3</span>
                        Dockerfile 中使用
                    </h4>
                    <div class="code-block">
                        FROM xget.xi-xu.me/cr/ghcr/nodejs/node:18-alpine
                    </div>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mt-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-indigo-600 p-6 text-white">
                        <h3 class="text-xl font-semibold mb-2">安装浏览器扩展</h3>
                        <p class="text-indigo-100">自动重定向下载链接到 Xget</p>
                    </div>
                    <div class="p-6">
                        <h4 class="font-semibold text-lg mb-3 flex items-center">
                            <span class="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mr-3 text-sm">1</span>
                            从商店安装
                        </h4>
                        <p class="text-slate-600 mb-4">
                            访问 Chrome 网上应用店或 Firefox 附加组件，搜索 "Xget-Now"
                        </p>
                        
                        <h4 class="font-semibold text-lg mb-3 flex items-center">
                            <span class="w-6 h-6 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mr-3 text-sm">2</span>
                            手动安装
                        </h4>
                        <div class="code-block mb-4">
                            git clone https://github.com/xixu-me/Xget-Now.git<br>
                            cd Xget-Now<br>
                            python build.py --platform chrome
                        </div>
                        
                        <p class="text-slate-600 text-sm">
                            在 Chrome（chrome://extensions/）启用开发者模式，加载 build/chrome/ 文件夹
                        </p>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-emerald-600 p-6 text-white">
                        <h3 class="text-xl font-semibold mb-2">自部署实例</h3>
                        <p class="text-emerald-100">搭建自己的 Xget 服务</p>
                    </div>
                    <div class="p-6">
                        <h4 class="font-semibold text-lg mb-3 flex items-center">
                            <span class="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mr-3 text-sm">1</span>
                            克隆仓库
                        </h4>
                        <div class="code-block mb-4">
                            git clone https://github.com/xixu-me/Xget.git<br>
                            cd Xget
                        </div>
                        
                        <h4 class="font-semibold text-lg mb-3 flex items-center">
                            <span class="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mr-3 text-sm">2</span>
                            安装依赖
                        </h4>
                        <div class="code-block mb-4">
                            npm install -g wrangler
                        </div>
                        
                        <h4 class="font-semibold text-lg mb-3 flex items-center">
                            <span class="w-6 h-6 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mr-3 text-sm">3</span>
                            部署服务
                        </h4>
                        <div class="code-block">
                            wrangler deploy
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 mt-8 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-yellow-500 text-2xl"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-semibold text-yellow-800">思考提示</h3>
                        <p class="text-yellow-700">
                            你的团队是否需要为 CI/CD 或模型下载配置加速？尝试用 Xget 替换一个下载链接，看看速度提升多少！
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-16 bg-slate-50 px-4">
        <div class="max-w-4xl mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">技术架构</h2>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    Xget 如何通过 Cloudflare 全球边缘网络加速你的下载
                </p>
            </div>
            
            <div class="bg-white p-6 rounded-xl shadow-md">
                <div class="mermaid">
                    graph LR
                    A[用户设备] -->|请求资源| B[Xget 边缘节点]
                    B -->|缓存命中| C[立即返回资源]
                    B -->|缓存未命中| D[源站 GitHub/Hugging Face/npm 等]
                    D -->|加速传输| B
                    B -->|HTTP/3 分片传输| A
                    style A fill:#f0f9ff,stroke:#3b82f6
                    style B fill:#eef2ff,stroke:#6366f1
                    style C fill:#ecfdf5,stroke:#10b981
                    style D fill:#f5f3ff,stroke:#8b5cf6
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            fontFamily: 'Noto Sans SC',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Smooth scroll for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```